利用微软Atlas消费外部Web服务

四、 构建ZipCode JavaScript客户端

　　现在，既然你已经实现了服务器端的Web服务代码，那么接下来，你可以创建一个存取该服务的JavaScript客户端。为此，你要添加ZipCodeConduitClient.aspx；这是通过使用"Add New Item…"→"Web Form"选项来把一个Web表单添加到你的ZipCodeRUs中实现的。

　　在ZipCodeConduitClient.aspx代码中，通过创建Atlas的ScriptManager的一个实例并且把一个对基于ASP.NET的Web服务ZipCodeConduitService.asmx文件的引用添加到Web页面的元素来启动微软Atlas。详见下面的代码：

... ＜head id="Head1" runat="server"＞ ＜title＞Zip Code Information Service - Atlas JavaScript Conduit Client＜/title＞ ＜atlas:ScriptManager ID="scriptManager" runat="server" EnableScriptComponents="true"＞ ＜Services＞ ＜atlas:ServiceReference Path="ZipCodeConduitService.asmx" /＞ ＜/Services＞ ＜/atlas:ScriptManager＞ ＜script type="text/xml-script"＞ ＜page xmlns:script= "http://schemas.microsoft.com/xml-script/2005"＞ ＜components＞ ＜webRequestManager batchSize="5" enableBatching="true" batchDelay="3000" /＞ ＜/components＞ ＜/page＞ ＜/script＞ ＜/head＞ ...

　　有趣的是，前面的代码支持在JavaScript和Web服务之间的"批"方式的Web服务请求。通过添加webRequestManager元素以及把enableBatching属性值设置为true可以使得由Atlas来承担所有的繁重工作-积累所有的请求，然后在一个批中立即执行它们。Atlas还能够跟踪所有的返回值和来自于Web服务中的对象。注意，上面的代码能够"积累"达到五个请求，然后一次性执行所有的请求。

　　现在，你可以通过添加一些HTML和ASP元素来创建web页面上的可视化元素。最终产生的页面大致如图2所示。


图2.该图展示了Visual Studio中处于设计方式的ZipCodeConduitClient.aspx页面。

... ＜form id="ZipCodeConduitClient" runat="server" ＞＜/form＞ ＜h4＞ Enter ZipCodes: 1＞ ＜input id="textZipCode1" /＞ 2＞ ＜input id="textZipCode2" /＞ 3＞ ＜input id="textZipCode3" /＞ ＜input id="buttonZipCode" type="button" value="Get Information" onclick="return OnbuttonZipCode_click()" /＞ ＜/h4＞ ＜table border="1" cellpadding="5" cellspacing="2"＞ ＜tr＞ ＜td＞＜/td＞ ＜td＞＜asp:Label ID="corelationId1" runat="server" Text="."/＞＜/td＞ ＜td＞＜asp:Label ID="corelationId2" runat="server" Text="."/＞＜/td＞ ＜td＞＜asp:Label ID="corelationId3" runat="server" Text="."/＞＜/td＞ ＜/tr＞ ＜tr＞ ＜td＞ZipCode＜/td＞ ＜td＞＜asp:Label ID="zipCode1" runat="server" Text="."/＞＜/td＞ ＜td＞＜asp:Label ID="zipCode2" runat="server" Text="."/＞＜/td＞ ＜td＞＜asp:Label ID="zipCode3" runat="server" Text="."/＞＜/td＞ ＜/tr＞ ... ＜tr＞ ＜td＞＜/td＞ ＜td＞＜asp:Label id="message1" runat="server" Text="."/＞＜/td＞ ＜td＞＜asp:Label id="message2" runat="server" Text="."/＞＜/td＞ ＜td＞＜asp:Label id="message3" runat="server" Text="."/＞＜/td＞ ＜/tr＞ ＜/table＞ ＜br /＞ ＜asp:Label ID="message" runat="server" BorderStyle="Groove" BackColor="#FF8080" BorderWidth="1px" Font-Bold="True" ForeColor="White"＞Ready＜/asp:Label＞ ...

　　注意，在此，"Get Information"(在源代码中命名为buttonZipCode)按钮的点击导致调用OnbuttonZipCode_click() JavaScript函数，请参考下面的代码：

＜script type="text/javascript" language="JavaScript"＞ function OnbuttonZipCode_click() { 　document.getElementById('message').innerHTML = "Retrieving Information..."; 　if (document.getElementById('textZipCode1').value.length ＞ 0) 　{ 　　service = ZipCodeConduitService.GetZipCodeInfo("1"， document.getElementById('textZipCode1').value， 　　　OnComplete， //完成事件 　　　OnTimeout， //超时事件 　　　OnError // 出错事件 　　); 　} 　... } return false; } ... ＜/script＞

　　在这个OnbuttonZipCode_click函数中，ZipCodeConduitService JavaScript代理对象可以为Atlas所隐含地使用。注意，GetZipCodeInfo()函数共使用三个参数，除了在ZipCodeConduitService Web服务中GetZipCodeInfo()函数所使用的两个参数以外。这是因为Atlas使所有的Web服务调用都以异步地进行；在发出一个Web服务调用后，JavaScript客户端代码并不等待该服务器的响应。当响应到达时，Atlas框架需要使用客户端的一个回调函数。GetZipCodeInfo方法使用的其它参数正是从JavaScript代码指向这些回调函数的指针。来自于服务器的响应可能是成功的，可能是返回一个错误消息，也可能是因超时而无响应返回。前面的代码分别由OnComplete()，OnError()和OnTimeout()函数负责处理每一种可能的响应类型。